import { Button, Card, Form, Input, Radio, Spin, message } from "antd";
import { PropsTypes } from "./type"
import React, { useState } from "react";
import checkPasswordRule from "@/utils/checkPassWord";
import type { FormInstance } from 'antd/es/form';
import { ceatUser } from "@/api/user"
import { encrypt } from "@/utils/rsa";
type FieldType = {
    account: string;
    passWord: string;
    ckPassWord: string;
    nickName: string;
    phone: string;
    sex: string
    address: string
};
interface statsFace {
    loading: boolean
}
const defaultState: statsFace = {
    loading: false
}
const Register: React.FC<PropsTypes> = ({ changeType }) => {
    const [state, setState] = useState<statsFace>(defaultState)
    const formRef = React.useRef<FormInstance>(null);
    const validatePass = (_rule: any, value: any) => {
        const v = formRef?.current?.getFieldValue("account")
        console.log(v)
        if (!value) {
            //   callback(new Error('请输入密码'));
            return Promise.reject('请输入密码')
        } else {
            const bad = checkPasswordRule(value, v);
            if (bad) {
                // callback(new Error('密码不符合规则：' + bad));
                return Promise.reject('密码不符合规则' + bad)
            } else {
                return Promise.resolve()
            }
        }
    };
    const onFinish = async (e: FieldType) => {
        setState((e: statsFace) => ({
            loading: !e.loading
        }))
        e.passWord = encrypt(e.passWord) || ""
        ceatUser(e).then(() => {
            message.success("注册成功，请登陆")
            changeType(false)
        }).finally(() => {
            setState((e: statsFace) => ({
                loading: !e.loading
            }))
        })
    }
    const onFinishFailed = () => {
    }
    const handleChange = () => {
        changeType(false)
    }
    return (
        <Spin spinning={state.loading}>
            <Card
                title="注册"
                bordered={false}
                styles={{ header: { textAlign: "center" } }}
                extra={<Button type="link" onClick={handleChange}>
                    返回登陆
                </Button>}>
                <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    ref={formRef}
                >
                    <Form.Item<FieldType>
                        label="用户名"
                        name="account"
                        rules={[{ max: 12 }, { required: true, message: '请输入用户名!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item<FieldType>
                        label="密码"
                        name="passWord"
                        rules={[{ required: true, validator: validatePass }]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="再次输入密码"
                        name="ckPassWord"
                        rules={[{ required: true, validator: validatePass }]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="用户昵称"
                        name="nickName"
                        rules={[{ max: 12 }, { required: true, message: '请输入用户昵称!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="手机号"
                        name="phone"
                        rules={[{ max: 11 }, { required: true, message: '请输入用户手机号!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label="性别" name="sex" rules={[{ required: true, message: '请输入用户昵称!' }]}>
                        <Radio.Group>
                            <Radio value="男"> 男 </Radio>
                            <Radio value="女"> 女 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="地址"
                        name="address"
                        rules={[{ required: true, message: '请输入地址!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 2, span: 22 }}>
                        <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
                            注册
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </Spin>

    )
}
export default Register